<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border practice</title>
    <style>
        /* *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        } */

        .demo1{
            width:200px;
            height:80px;
            background: #fff;
            position:relative;
            margin-bottom:40px;
        }
        .demo1 .box{
            width:100%;
            height:100%;
            border:1px dashed #f40;
        }

        .traingle{
            position:absolute;
            left:160px;
            top:80px;
            height:0;
            width:0;
            border:20px solid #f40;
            background: #f40;
            border-bottom-color:#fff;
            border-left-color:#fff;
            border-right-color:#fff;
        }
    </style>
    <style>
 *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        .demo2{
           
            width:200px;
            height:80px;
            background: #fff;
            position:relative;margin-bottom:40px;
        }
        .demo2 .box{
            width:100%;
            height:100%;
            border:1px dashed #f40;
        }

        .traingle2{
            position:absolute;
            left:0;
            top:80px;
            height:0;
            width:0;
            border:20px solid #f40;
            background: #f40;
            border-bottom-color:#fff;
            border-left-color:#fff;
            border-right-color:#fff;
        }












    </style>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        .demo3{
            width:200px;
            height:80px;
            background: #fff;
            position:relative;
            margin-bottom:40px;
        }
        .demo3 .box{
            width:100%;
            height:100%;
            border:1px dashed #f40;
        }

        .traingle3{
            position:absolute;
            left:200px;
            top:0px;
            height:0;
            width:0;
            border:20px solid #f40;
            background: #f40;
            border-top-color: #fff;
            border-right-color: #fff;
            border-bottom-color: #fff;
        }
    </style>
    <style>
        *{
                   margin:0;
                   padding:0;
                   box-sizing:border-box;
               }
       
               .demo4{
                  
                   width:200px;
                   height:80px;
                   background: #fff;
                   position:relative;
               }
               .demo4 .box{
                   width:100%;
                   height:100%;
                   border:1px dashed #f40;margin-left:40px;
               }
       
               .traingle4{
                   position:absolute;
                   left:0px;
                   top:0px;
                   height:0;
                   width:0;
                   border:20px solid #f40;
                   background: #f40;
                   border-bottom-color:#fff;
                   border-left-color:#fff;
                   border-top-color:#fff;
               }
           </style>
           <style>
*
                  {margin:0;
                   padding:0;
                   box-sizing:border-box;}
                   .traingle5{position:absolute;
                   left:0px;
                   top:0px;
                   height:0;
                   width:0;
                   border:20px solid #f40;
                   background: #f40;
                   border-bottom-color:50px #f40;
                   border-left-color:50px #f40;
                   border-top-color:#fff;margin-top: 120px;border-right-color:#fff}
                   



           </style>
           <style>

*
                  {margin:0;
                   padding:0;
                   box-sizing:border-box;}
                   .traingle6{position:absolute;
                   left:0px;
                   top:0px;
                   height:0;
                   width:0;
                   border:20px solid #f40;
                   background: #f40;
                   border-bottom-color:50px #f40;
                   border-right-color:50px #f40;
                   border-top-color:#fff;margin-top: 160px;border-left-color:#fff}



           </style>
             <style>

                *
                                  {margin:0;
                                   padding:0;
                                   box-sizing:border-box;}
                                   .traingle7{position:absolute;
                                   left:0px;
                                   top:0px;
                                   height:0;
                                   width:0;
                                   border:40px solid #f40;
                                   background: #f40;
                                   border-bottom:50px solid #f40;
                                   border-right:20px solid #fff;
                                   border-top: 0px solid #fff;margin-top: 200px;border-left:20px solid #fff}
                
                
                
                           </style>
</head>
<body>


    <div style="width:300px;">
        <p>题目是：请画出</p>
        <img src="./img/t1.jpg" style="width:100%;" alt="">
    </div>
    <p>例1：</p> 
    <div class="demo1">
         <div class="box"></div>
         <div class="traingle"></div>
    </div>
<div class="demo2">
    <div class="box"></div>
    <div class="traingle2"></div>

</div><div class="demo3">
    <div class="box"></div>
    <div class="traingle3"></div>

</div>
<div class="demo4">
    <div class="box"></div>
    <div class="traingle4"></div>
    <div>
        <div class="traingle5"></div>
        
        </div>
        
        <div>
            <div class="traingle6"></div>
            
            </div>
            <div>
                <div class="traingle7"></div>
                
                </div>


      <div style="font-size:90px;color:#f00;">100 分</div>
    
</body>
</html>